<template>
    <div>
        <basic-layout title="外卖预定" :showAddBtn="false">
            <div class="columnFlex">
                <!-- 列表 -->
                <van-row class="listCon">
                    <ul class="dateTitle">
                        <li v-for="item in weekList" :key="item.tip" :class="{'curDate': curDate === item.date}" @click="changeDate(item.date)">
                            <p>{{item.tip}}</p>
                            <p class="date">{{item.showDate}}</p>
                        </li>
                    </ul>
                    <div class="flexRow">
                        <div class="left">
                            <ul class="classNav">
                                <li v-for="item in mealsTypeList" :key="item.code" :class="{'curClass': mealsType === item.code}" @click="changeMealsType(item.code)">{{item.value}}</li>
                            </ul>
                        </div>
                        <div class="right">
                            <div class="dishList">
                                <div v-for="item in dishList" :key="item.id" class="item-list">
                                    <img :src="fileUrlObj[item.filecode] || (loading ? 'images/loading.gif' : 'images/noImgData.png')" />
                                    <div>
                                        <div class="tit">
                                            <p><b>{{item.dishName}}</b></p>
                                            <span>￥{{item.discountPrice}}</span>
                                        </div>
                                        <div class="tip">
                                            <span>{{item.dishCuisineName}}</span>
                                            <span>{{item.flavorTypeName}}</span>
                                        </div>
                                        <p class="seckilTime" v-if="mealsType === '0'">
                                            <van-icon name="underway-o" /> {{item.seckilStartTime.slice(0, -3)}}~{{item.seckilEndTime.slice(0, -3)}}</p>
                                        <div class="action">
                                            <p class="text">{{item.dishLimitAmount === '-1' ? '不限购' : '限购：' + item.dishLimitAmount}}</p>
                                            <van-button icon="plus" round color="linear-gradient(to right, #ff6034, #ee0a24)" size="mini" @click="handleAddCar(item)" />
                                        </div>
                                    </div>
                                </div>
                                <van-empty v-if="!loading && !dishList.length" class="custom-image" :image="require('../../../../assets/images/empty.png')" description="暂无数据" />
                            </div>
                        </div>
                    </div>
                </van-row>
            </div>
            <!-- 购物车 -->
            <div class="myCar" @click="$refs.myCarRef.openMyCar()">
                <van-badge :content="carDishNum" max="99">
                    <van-icon name="shopping-cart" />
                </van-badge>
            </div>
            <div class="canteenIcon" @click="showPicker = true">
                <img src="../../../../assets/images/canteen.png">
            </div>
        </basic-layout>
        <full-loading v-if="loading"></full-loading>
        <!-- 食堂列表选择 -->
        <van-action-sheet v-model="showPicker" cancel-text="取消" :round="false" class="myActionSheet">
            <p>食堂列表</p>
            <ul>
                <li v-for="item in canteenList" @click="onConfirm(item)" :class="{'active': item.canteenId === canteenId}">
                    {{item.canteenName}}
                    <van-icon name="success" v-if="item.canteenId === canteenId" />
                </li>
            </ul>
        </van-action-sheet>
        <!-- 购物车 -->
        <myCar @refresh="handleRefresh()" ref="myCarRef" />
    </div>
</template>

<script>
    import { queryFileList } from '@/api/common';
    import { getCarNumByLoginUser, getMealsTypeInfo, addToCart, getCookbookDishInfo } from '@/api/srvAssurance/smarcatering/takeawayOrder';
    import { getCanteenInfoByLoginUser } from '@/api/srvAssurance/smarcatering/oneWeekMenu';
    import myCar from './myCar';
    export default {
        components: { myCar },
        data () {
            return {
                loading: false,
                showPicker: false,
                carDishNum: 0,
                canteenId: '',
                curDate: '',
                mealsType: '',
                weekList: [],
                mealsTypeList: [],
                dishList: [],
                canteenList: [], // 食堂列表
                fileUrlObj: {}
            };
        },
        created () {
            this.initDate();
            this.getCarNumByLoginUserData();
            this.getCanteenInfo();
        },
        methods: {
            initDate () {
                this.weekList = [];
                let days = ['一', '二', '三', '四', '五', '六', '日'];
                let curDay = new Date().getDay() - 1;
                for (var i = 0; i < 7; i++) {
                    this.weekList[i] = {
                        date: new Date(new Date(new Date().getTime() + 86400000 * i)).format('yyyy-MM-dd'),
                        showDate: new Date(new Date(new Date().getTime() + 86400000 * i)).format('MM.dd'),
                        tip: (curDay + i) === -1 ? days[6] : days[((i + curDay) % 7)]
                    }
                }
                this.curDate = new Date().format('yyyy-MM-dd');
            },
            // 加入购物车
            handleAddCar (item) {
                let params = {
                    canteenId: this.canteenId,
                    cookbookDate: this.curDate,
                    cookbookId: item.cookbookId,
                    dishId: item.dishId,
                    dishNum: 1,
                    mealsType: this.mealsType
                }
                addToCart(params).then(res => {
                    if (res.code === 1000) {
                        this.$toast('加入成功！');
                        this.getCarNumByLoginUserData('quietly');
                    }
                })
            },
            // 查询购物车数量
            getCarNumByLoginUserData (sign) {
                if (sign !== 'quietly') {
                    this.carDishNum = '0';
                }
                getCarNumByLoginUser().then(res => {
                    if (res.code === 1000 && res.data) {
                        this.carDishNum = res.data;
                    }
                })
            },
            // 查询食堂列表
            getCanteenInfo () {
                getCanteenInfoByLoginUser().then(res => {
                    if (res.code === 1000 && res.data) {
                        this.canteenList = res.data;
                        if (this.canteenList.length) {
                            this.canteenId = this.canteenList[0].canteenId;
                            this.getMealsTypeInfoData();
                        }
                    }
                })
            },
            // 食堂列表选择
            onConfirm (item) {
                this.canteenId = item.canteenId;
                this.showPicker = false;
                this.getMealsTypeInfoData();
            },
            // 获取餐次信息
            getMealsTypeInfoData () {
                if (!this.canteenId) return;
                let params = {
                    canteenId: this.canteenId,
                    cookbookDate: this.curDate
                }
                this.mealsType = '';
                this.mealsTypeList = [];
                this.dishList = [];
                getMealsTypeInfo(params).then(res => {
                    if (res.code === 1000 && res.data) {
                        this.mealsTypeList = res.data;
                        if (this.mealsTypeList.length) {
                            this.mealsType = this.mealsTypeList[0].code;
                            this.getWeekCookbookData();
                        }
                    }
                })
            },
            // 改变日期
            changeDate (date) {
                this.curDate = date;
                this.getMealsTypeInfoData();
            },
            // 改变餐次
            changeMealsType (type) {
                this.mealsType = type;
                this.getWeekCookbookData();
            },
            // 获取菜肴信息
            getWeekCookbookData () {
                if (!this.canteenId || !this.mealsType) return;
                let params = {
                    canteenId: this.canteenId,
                    cookbookDate: this.curDate,
                    mealsType: this.mealsType,
                    isRecommend: '',
                    dishTypeId: ''
                }
                this.dishList = [];
                this.loading = false;
                getCookbookDishInfo(params).then(res => {
                    if (res.code === 1000 && res.data) {
                        this.dishList = [];
                        this.dishList = res.data;
                        let filecodeArr = [];
                        this.dishList.forEach(item => {
                            item.dishNum = 1;
                            if (item.filecode && !this.fileUrlObj[item.filecode]) {
                                filecodeArr.push(item.filecode);
                                this.fileUrlObj[item.filecode] = '';
                            }
                        })
                        if (filecodeArr.length) {
                            this.queryFileInfoData(filecodeArr);
                        }
                    }
                })
            },
            // 获取图片信息
            queryFileInfoData (filecodeArr) {
                this.loading = true;
                queryFileList(filecodeArr).then(res => {
                    if (res.code === 1000 && res.data) {
                        res.data.forEach(item => {
                            this.fileUrlObj[item.fileCode] = item.url;
                        })
                        this.$forceUpdate();
                        this.loading = false;
                    }
                }).catch(() => {
                    this.loading = false;
                })
            },
            // 刷新页面
            handleRefresh () {
                this.getWeekCookbookData();
                this.getCarNumByLoginUserData();
            }
        },
    };
</script>

<style scoped lang="less">
    .myCar {
        position: absolute;
        right: 55px;
        top: 12px;
        z-index: 99;
        .van-icon {
            color: #fff;
            font-size: 22px;
        }
    }
    .canteenIcon {
        position: absolute;
        right: 15px;
        top: 14px;
        z-index: 99;
        img {
            width: 19px;
        }
    }
    .listCon {
        padding: 0;
        display: flex;
        flex-direction: column;
        .dateTitle {
            display: flex;
            background: #fff;
            padding: 10px 5px;
            box-sizing: border-box;
            li {
                text-align: center;
                padding: 5px 0;
                flex: 1;
                p {
                    line-height: 18px;
                }
                .date {
                    font-size: 12px;
                }
            }
            .curDate {
                background: #d7a550;
                color: white;
                border-radius: 5px;
            }
        }
        .flexRow {
            margin-top: 1px;
            display: flex;
            overflow: hidden;
            background: #fff;
            flex: 1;
            .left {
                flex: 1;
                text-align: center;
                // 分类导航
                .classNav {
                    li {
                        line-height: 70px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        padding: 0 10px;
                        box-sizing: border-box;
                        font-size: 13px;
                    }
                    .curClass {
                        background: #f3f2f2;
                        color: #2db7f5;
                    }
                }
            }
            .right {
                flex: 6;
                box-shadow: 0px 3px 9px rgba(27, 93, 213, 0.1);
            }
        }
        // 食物列表
        .dishList {
            overflow: auto;
            padding: 8px 0 8px 8px;
            box-sizing: border-box;
            height: 100%;
            .item-list {
                width: 31.1%;
                border: 1px solid rgba(0, 0, 0, 0.1);
                border-radius: 7px;
                overflow: hidden;
                float: left;
                box-sizing: border-box;
                margin-bottom: 8px;
                & > div {
                    padding: 4px 6px 6px;
                    box-sizing: border-box;
                }
                img {
                    width: 100%;
                    height: 60px;
                }
                .tit {
                    display: flex;
                    p {
                        font-size: 12px;
                        flex: 1;
                        color: #333;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    span {
                        margin-left: 5px;
                        color: red;
                        font-size: 11px;
                    }
                }
                .tip {
                    margin-top: 6px;
                    font-size: 11px;
                    span {
                        background: #f2a84e;
                        color: #fff;
                        padding: 2px 5px;
                        border-radius: 3px;
                        margin-right: 5px;
                    }
                    span:nth-of-type(2) {
                        background: #46acf0;
                    }
                }
                .seckilTime {
                    font-size: 11px;
                    color: #666;
                    margin-top: 6px;
                }
                .action {
                    margin-top: 4px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .text {
                        font-size: 11px;
                        color: #aaa;
                    }
                    .van-button--mini {
                        padding: 1px 3px;
                        height: auto;
                    }
                }
            }
            .item-list {
                margin-right: 2.2%;
            }
        }
    }
    .myActionSheet {
        text-align: center;
        p {
            color: #969799;
            font-size: 14px;
            line-height: 50px;
            border-bottom: 1px solid #eee;
        }
        ul {
            max-height: 180px;
            padding: 0 15px;
            line-height: 32px;
            font-size: 14px;
            overflow: auto;
            box-sizing: border-box;
            margin: 10px 0;
            li {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                position: relative;
                padding: 0 30px;
                box-sizing: border-box;
                .van-icon {
                    position: absolute;
                    font-size: 18px;
                    top: 5px;
                    right: 0;
                    color: #4eb3e9;
                }
            }
            .active {
                color: #4eb3e9;
            }
        }
    }
</style>